<template>
  <n-layout class="center-container" has-sider position="absolute">

    <n-drawer v-model:show="showMenuDrawer" :width="260" placement="left" class="menu-drawer" to=".center-container">
      <n-drawer-content>
        <MenuSider @switchMenu="switchMenu" />
      </n-drawer-content>
    </n-drawer>

    <MenuSider @switchMenu="switchMenu" v-show="showMenu" />

    <n-layout :native-scrollbar="false" class="main-layout">
      <div class="header-container bg-primary dark:bg-[#18181c]">
        <n-layout-header class="xs:py-2.5 xs:px-4 bg-transparent">
          <n-space align="center">
            <n-button class="flex items-center" v-if="!showMenu" text @click="showMenuDrawer = !showMenuDrawer">
              <n-icon :component="ListOutline" color="#ffffff" size="26" />
            </n-button>
            <n-button class="flex items-center" text @click="$router.push('/redirect')" :disabled="mainStore.pageLoading">
              <n-icon :component="SyncOutline" color="#ffffff" size="26" />
            </n-button>
            <div class="flex items-center">
              <n-text class="text-base text-white">{{ $route.meta.title }}</n-text>
            </div>
          </n-space>
          <div class="flex items-center">
            <n-switch v-model:value="mainStore.theme" checked-value="dark" @update:value="mainStore.setTheme"
              unchecked-value="light" :rail-style="({ checked }) => ({ background: checked ? '#424245' : '#cccccc' })">
              <template #checked-icon>
                <n-icon :component="MoonOutline" />
              </template>
              <template #unchecked-icon>
                <n-icon :component="SunnyOutline" />
              </template>
            </n-switch>
            <n-dropdown :options="centerData.userOptions" :width="150" class="rounded" placement="bottom-end" size="large"
              to=".center-container" trigger="click" @select="selectUserMenu">
              <n-avatar class="cursor-pointer ml-3" round>{{ userStore.userInfo?.username }}</n-avatar>
            </n-dropdown>
          </div>
        </n-layout-header>
      </div>
      <n-layout-content class="main-content xs:mt-[54px] mb-0">
        <div class="content-container xs:p-3 s:p-6 mx-auto">
          <router-view />
        </div>
      </n-layout-content>
    </n-layout>
  </n-layout>

  <n-drawer v-model:show="centerData.showAccountDrawer" :width="375" to=".center-container">
    <n-drawer-content title="账户设置" closable>
      <AccountSetting />
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { h, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore, useUserStore } from '@/store'
import { NIcon } from 'naive-ui'
import { SyncOutline, ListOutline, SunnyOutline, MoonOutline, LogOutOutline, SettingsOutline } from '@vicons/ionicons5'
import MenuSider from './components/MenuSider.vue'
import AccountSetting from './components/AccountSetting.vue'

const userStore = useUserStore()
const mainStore = useMainStore()
const router = useRouter()

const renderIcon = (icon) => {
  return () => {
    return h(NIcon, { size: 24 }, {
      default: () => h(icon)
    })
  }
}

const centerData = reactive({
  showAccountDrawer: false,
  userOptions: [
    {
      label: '账户设置',
      key: 'setting',
      icon: renderIcon(SettingsOutline)
    },
    {
      label: '退出登录',
      key: 'quit',
      icon: renderIcon(LogOutOutline)
    },
  ],
})

let showMenuDrawer = ref(false)
let showMenu = ref(document.body.clientWidth >= 1440)
onMounted(() => {
  window.onresize = () => {
    showMenuDrawer.value = false
    showMenu.value = document.body.clientWidth >= 1440
    mainStore.setPaginationSimple(document.body.clientWidth < 1440)
  }
})

const switchMenu = key => {
  showMenuDrawer.value = false
  router.push({ name: key })
}

const selectUserMenu = key => {
  switch (key) {
    case 'setting':
      centerData.showAccountDrawer = true
      break
    case 'quit':
      userStore.logout()
      break
  }
}
</script>

<style lang="less" scoped>
.center-container {
  height: 100vh;

  &:deep(.menu-drawer) {
    .n-drawer-body {
      .n-drawer-body-content-wrapper {
        padding: 0;
      }
    }
  }

  &:deep(.main-layout) {
    position: relative;

    .n-scrollbar-content {
      .header-container {
        width: 100%;
        padding-bottom: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;

        .n-layout-header {
          max-width: 1400px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 auto;
        }
      }

      .main-content {
        .n-layout-scroll-container {
          .content-container {
            max-width: 1448px;
            min-height: calc(100vh - 54px);

            .n-data-table {
              height: calc(100vh - 159px);

              .n-data-table__pagination {
                justify-content: center;
                margin-bottom: 16px;
              }
            }
          }
        }
      }

      @media only screen and (max-width: 640px) {
        .main-content {
          .n-layout-scroll-container {
            .content-container {
              min-height: calc(100vh - 64px);

              .n-data-table {
                height: calc(100vh - 145px);
              }
            }
          }
        }
      }
    }
  }

  &:deep(.n-dropdown-menu) {
    .n-dropdown-option {
      .n-dropdown-option-body {
        padding-left: 15px;

        .n-dropdown-option-body__label {
          padding-top: 1px;
        }
      }
    }
  }
}
</style>
